<template>
	<!-- 列表盒子开始 -->
	<!-- hldsrc是动态的背景图片，包含的css类名有：bg -->
	<view class="">
		<!-- <view class="" style="width: 100vw;height: 4vh;"></view> -->
	
	<view class="" style="display: flex;">
		<view class="" >
			<!-- <leftmenuVue ></leftmenuVue> -->
		</view>
	
	<view class="zw" style="display: flex; flex-wrap:wrap;">
		
		<!-- <view class="" v-for="item in 8" :key="item"> -->
			<view @click="interview" class="bg" style="" :style="{
			backgroundImage: `url(${hldsrc1})`,   
			backgroundSize: 'cover'
							}">
						<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								面相分析
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								面相分析（Face Analysis），通过上传符合要求的正脸照片，利用相关技术进行面相分析
							</view>
						</view>
						</view>
			<view @click="picture" class="bg" style="" :style="{
			backgroundImage: `url(${hldsrc2})`,   
			backgroundSize: 'cover'
							}">
						<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								画图分析
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								画图分析（Drawing Analysis），通过自主绘画测评和选择图片生成报告两种方式，对绘画相关内容进行分析
							</view>
						</view>
						</view>	
			<view @click="health" class="bg" style="" :style="{
			backgroundImage: `url(${hldsrc3})`,   
			backgroundSize: 'cover'
							}">
						<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								心理健康测试
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								心理健康测试（Men Health Test），是一种用于评估个体心理状态、情绪健康及心理功能的工具
							</view>
						</view>
						</view>
			<view @click="exchange" class="bg" style="" :style="{
			backgroundImage: `url(${hldsrc4})`,   
			backgroundSize: 'cover'
							}">
						<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								语音交流
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								语音交流（Voice Communication），通过声音传递信息、实现沟通互动的方式
							</view>
						</view>
						</view>								
		<!-- </view> -->
		
	</view>
	<!-- 列表盒子结束 -->
	</view>
	</view>
</template>/

<script>
	import leftmenuVue from '../common/leftmenu.vue'
	export default{
		components: {
		   leftmenuVue
		 },
		data(){
			return{
				hldsrc1:this.$baseURL+"/profile/upload/2025/05/27/tp1_20250527132657A011.jpg",
				hldsrc2:this.$baseURL+"/profile/upload/2025/05/27/tp2_20250527132708A012.jpg",
				hldsrc3:this.$baseURL+"/profile/upload/2025/05/27/tp3_20250527132716A013.jpg",
				hldsrc4:this.$baseURL+"/profile/upload/2025/05/27/tp4_20250527132724A014.jpg"
			};
		},
		 methods:{
			interview(){
				uni.navigateTo({
					url:'/pages/psychologyModel/facialAnalysis/index'
				});
			},
			picture(){
				uni.navigateTo({
					url:'/pages/psychologyModel/drawingAnalysis/index'
				});
			},
			health(){
				uni.navigateTo({
					url:'/pages/psychologyModel/psychologicalTest/index'
				});
			},
			exchange(){
				uni.navigateTo({
					url:''
				})
			}
		}
	}
</script>

<style>
	.zw{
		width: 89vw;
		height: 96vh;
		/* margin-left: 1vw;
		margin-right: 1vw; */
	}
	.bg{
		border-radius: 50px;
		box-shadow:  -20px -20px 60px #bebebe,
		             20px 20px 60px #ffffff;
		width: 32vw;height: 35vh;
		margin-top: 3vh;
		margin-bottom: 3vh ;
		margin-left: 6vw;
		margin-right: 6vw;
		  background-size: contain;  
		  background-repeat: no-repeat;
		  background-position: center center; 
		
	}
</style>